<template>
  <div class="hello">
    <img alt="Vue logo" src="@/assets/book.png" class="logo" align=absmiddle @click="$router.push('/Home')">
    <input type="text" class="search-box" :placeholder="loopbookname" v-model="key_word" @keyup="enter($event)">
    <input type="button" value="搜索" ref="sousuo" class="search-button" @click="search()">
    
			<div>
				<!-- 购物车 -->
				<DropDownShoppingCart></DropDownShoppingCart>

			</div>
      <span class="login" v-if="!active_user">
        您好，请先
        <span @click="showlogreg(true);setlogin(true)">登录</span>
        或免费
        <span @click="showlogreg(true);setlogin(false)">注册</span>
      </span>
      <span v-if="active_user" class="login">
        欢迎{{active_user}},
        <span @click="signout();">退出登陆</span>
      </span>
    <LoginRegister v-if="showlogin"></LoginRegister>
  </div>
</template>

<script>
import LoginRegister from "../../views/LoginRegister"
import {mapState,mapGetters,mapMutations} from "vuex"
import DropDownShoppingCart from "../../views/DropDownShoppingCart.vue"


export default {
  name: 'Header',
	data() {
		return {
			key_word: '',
			color: 'black',
      booklist: this.$books_name,
      loopbookname:'',
			drawer: false
		}
	},
  components: {
    LoginRegister,
    DropDownShoppingCart
  },
  computed: {
    ...mapState('logreg',[
      'showlogin',
      'active_user'
    ]),
    ...mapState('cart',[
      'totalnumber'
    ]),
    ...mapGetters('logreg',[
      ]),
  },
  methods: {
		to_cart() {
			if (this.$store.state.logreg.active_user){
				this.$router.push({path:'/shoppingcart'})
			}else{
				alert('请先登录！')
			}
		},
		enter(e) {
			if (e.keyCode == 13){
				this.search()
			}
		},
		search() {
			this.$router.push({
				path: '/search',
				query: {
					wd: this.key_word
				}
			})
		},
    ...mapMutations('logreg',[
      'showlogreg',
      'setlogin',
      'signout',
    ]),
  },
	mounted() {
    setInterval(() => {
      let sousuo = this.$refs.sousuo;
			if (this.color == 'black'){
        sousuo.style.backgroundColor = 'DarkSlateGray';
				this.color = '#0055ff';
			}else{
        sousuo.style.backgroundColor = 'Teal';
				this.color = 'black';
			}
		}, 1000)

    // 搜索栏书名循环

    for (let i = 0; i <= 5; i++) {
      setTimeout(() => this.loopbookname = this.booklist[i], 2000*i)
    }
    setInterval(() => {
      for (let i = 0; i < this.booklist.length; i++) {
        setTimeout(() => this.loopbookname = this.booklist[i], 2000*i)
      }
    },10000)
	},
}
</script>

<style lang="less">
div.hello {
  margin:0 auto;
  margin-top: 1em;
  height: 4.5em;
	position: relative;
}
img.logo {
  width: 8em;
  height: 5em;
  position: relative; 
  left: 14%;
  float: left;
  cursor: pointer;
}

input.search-box {
  position: absolute;
  width: 18%;
  height: 3em;
  left: 32%;     
  top: 2em;

  background-image:url('../../assets/magnifier.png');
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 92% 10px;

  border-right-style: none;
  border-top-color: #5555ff;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  outline: none;
  transition: width 0.25s,left 0.25s;
}
  input.search-box:focus {
    left: 27%;
    width: 23%;
  }
input.search-button {
  position: absolute;
	transition: 1s;
  width: 3.7em;
  height: 2.75em;
  top: 1.68em;
  left: 50%;
  background-color: #000;
  border:  #5500ff;
  color: #fff;
  font-size: 16px;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  cursor: pointer;
  }

span.login {
  position: absolute;
  top: 0em;
	right: 0px;
  width: 10em;
  white-space:nowrap;
  left: 72%;
  font-family:'NSimSun';
  font-size: .875rem;
}
span.login>span {
  color: cornflowerblue;
  cursor:pointer;
}

.collapse {
	display: none;
	border: solid white 1px;
	right: 400%;
	top: 120%;
	position: relative;
	width: 900px;
	z-index: 999;
}
</style>
